<!--
    Va-Popover 《用于悬浮按钮》

    使用方式：
        <va-load :dictKey="dictKey"
             v-model="modelValue2"
        >
            <template #default="{  options,option }">
            </template>
        </va-load>
-->

<template>
    <span>

        <slot :options="options[dictKey]"
              :option="option"
              :loading="loading"
              :key="dictKey"
        />
    </span>
</template>

<script>
    import {ref, reactive, watch, getCurrentInstance} from 'vue'
    import util from "@/util/util"

    export default {
        name: "Va-Load",
        props: {
            /**
             * 数据字典key
             */
            dictKey: {
                type: String,
                default: null
            },
            /**
             * 远程加载函数
             */
            remoteLoading: {
                type: Function,
                default: () => ({})
            },
            /**
             * 用于接收v-model值 vue3.0 令名
             */
            modelValue: String,
        },
        created() {
            //加载数据
            this.load()
        },
        setup(props) {

            console.log(props.modelValue)
            const {proxy} = getCurrentInstance()

            /**
             * 选项数据
             */
            let options = reactive({})
            /**
             * 选项值
             */
            const option = ref({})
            /**
             * 当前数据是否为加载中
             */
            const loading = ref(false)


            //watch
            watch(() => props.dictKey, () => {
                load()
            })
            //watch
            watch(
                [options, () => props.modelValue], () => {
                    loadTranslate()
                },
            )

            /**
             * 加载数据
             */
            const load = () => {
                console.log(options)
                loading.value = true

                try {
                    if (util._.isEmpty(props.dictKey)) {
                        //通过函数加载
                        funLoad()
                    } else {
                        //通过数据字典加载选项
                        dictLoad()
                    }
                } catch (e) {
                    util.log.danger("加载数据异常" + e)
                    util.log.danger(props.dictKey)
                    options[props.dictKey] = util.constant.MODULE_EXCEPTION
                } finally {
                    loading.value = false
                }

            }

            /**
             * 字典方式加载数据
             */
            const dictLoad = () => {
                util.log.debug("字典方式加载数据")
                util.log.debug(props.dictKey)
                proxy.$store.dispatch('dict/dictSearching', props.dictKey)
                    .then(
                        (res) => {
                            options[props.dictKey] = res.list
                        }
                    )
                    .catch(
                        () => {
                            options[props.dictKey] = util.constant.DICT_EXCEPTION
                        })

            }

            /**
             * 函数方式加载数据
             */
            const funLoad = () => {
                util.log.debug("函数方式加载数据")
                util.log.debug(props.remoteLoading)

                //从接口函数中获取数据
                props.remoteLoading()
                    .then((res) => {
                            options[props.dictKey] = res
                        }
                    )
                    .catch(
                        () => {
                            options[props.dictKey] = util.constant.DATA_EXCEPTION
                        }
                    )

            }


            /**
             * 加载翻译
             */
            const loadTranslate = () => {

                if (!util._.isEmpty(options[props.dictKey])) {

                    let temporary = options[props.dictKey].filter(item => {

                        if (item.value == props.modelValue) {

                            return {item}
                        }
                    })

                    if (!util._.isEmpty(temporary)) {
                        option.value = temporary[0];
                    } else if (!util._.isEmpty(options[props.dictKey])
                        && options[props.dictKey] == util.constant.DICT_EXCEPTION) {

                        option.value = options[props.dictKey][0];

                    } else {
                        option.value = props.modelValue
                    }
                } else {
                    option.value = props.modelValue
                }
            }

            return {
                //data
                options,
                option,
                loading,
                //fun
                load,
            }
        }
    }
</script>

<style scoped>

</style>